// import React from 'react'
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { addjiaruAPI, loadxiangqingAPI, loadcartAPI } from "../services/home";
// import { loadChangjianAPI } from "../services/home";
import { useNavigate } from "react-router-dom";
import { Button, NavBar } from "antd-mobile";
import { dalImg } from "../utils/tools";

function Xiangqing() {
  const Params = useParams();
  console.log(Params);
  const nav = useNavigate();
  const back = () => nav(-1);
  const [list, setList] = useState([]);
  const add = async () => {
    const o = await addjiaruAPI(1, list.id, list.price);
    console.log(o);
  };
  useEffect(() => {
    loadxiangqingAPI(Params.id).then((res) => {
      setList(res.data);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useEffect(() => {
    loadcartAPI().then((res) => {
      console.log(res);
    });
  }, []);
  return (
    <div style={{ padding: "4px" }}>
      <NavBar back="返回" onBack={back}></NavBar>
      <div>
        <div>
          <img
            style={{ width: "100%", height: "300px" }}
            src={dalImg(list.image)}
            alt=""
          />
        </div>
        <div>
          <h3>{list.name}</h3>
          <p>{list?.category?.desc}</p>
          <p>{list.price}$</p>
          <Button style={{ float: "right" }} onClick={add}>
            加入购物车
          </Button>
          <Button style={{ float: "right" }}>立即购买</Button>
        </div>
      </div>
    </div>
  );
}

export default Xiangqing;
